<template>
  <div class="net-terminal relative">
    <page-loading></page-loading>
    <div class="view-table mb20" v-if="client_show=='1'">
      <div class="table-title">
        {{info1.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w70">
          <col class="w70">
          <col class="w80">
          <col class="w50">
          <col class="w80">
          <col class="w40">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info1.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td><el-select></el-select></td>
            <td v-for="n in 4">
              <input type="text" class="input-none bottom-line text-center input-cell" />
             </td>
             <td><span class="add">{{info1.operate}}</span></td>
          </tr> -->
          <tr v-for="(item, idx) in client_list" :key='idx' v-if="client_list">
            <td v-for="(value, idx) in client_map" :key='idx' v-if="idx < 3">{{item[value]}}</td>
            <!-- <td>{{item.TX + ' / ' + item.RX}}</td> -->
            <td>
              <span class="text-orange">{{item.rssi}}</span> / <span class="text-green">{{item.rssi1}}</span>
            </td>
            <td>
              <span class="text-orange">{{item.RX}}</span> / <span class="text-green">{{item.bandwidth}}</span>
            </td>
            <!-- <td><span class="add">{{info1.operate}}</span></td> -->
            <td><span class="add" @click="operate(item)">{{item.operation=="REJECT" ? $t("btn.enable") : $t("btn.disable")}}</span></td>
          </tr>
          <!-- 无数据则显示一行空表格 -->
          <tr v-if="client_list==''">
            <td v-for="n in info1.head.length" :key="n" style="height: 40px;"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="view-table mb20">
      <div class="table-title">
        {{info2.title}}:
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w70">
          <col class="w70">
          <col class="w80">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info2.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in arp_list" :key='idx'>
            <template v-for="(value, idx) in arp_map">
              <td v-if="idx==1" :key="idx">{{upperStr(item[value])}}</td>
              <td v-else :key="idx">{{item[value]}}</td>
            </template>

          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>

  export default {

    data(){
      return {
        info1: this.$t('network.terminal.info1'),
        info2: this.$t('network.terminal.info2'),
        client_list: '',
        client_map: ['interface', 'ipaddr', 'macaddr', 'rssi', 'rssi1', ],
        arp_list: '',
        arp_map: ['ipaddr', 'macaddr', 'interface'],
        // 实时刷新数据
        speed_timer: null,
        client_show: "0",
      }
    },
    methods: {
      get_wifi_client(){
        this.$req.get('/webapi?op=get_wifi_client').then(res => {
          // let data = JSON.parse(res.slice(res.indexOf('{')))
          // console.table(this.client_list, typeof res)
          this.client_show = res.device_table
          if(res.device_table == "0"){
            return
          }
          console.log(res, res.list)
          this.client_list = res.list
          console.log([] == false)
        })
      },
      get_arp(){
        this.$req.get('/webapi?op=get_arp').then(res => {
          // console.table(res.list)
          this.arp_list = res.list
        })
      },
      operate(item) {
        console.log(item.operation)
        let operation = item.operation == "REJECT" ? "ACCEPT" : "REJECT"
        this.proxy_req("post", "/webapi?op=set_wifi_client", {
          macaddr: item.macaddr,
          operation,
        }, res => {
          this.get_wifi_client()
          // item.operation = res.return_operation
        }, true)
      }
    },
    created(){
      this.get_wifi_client()
      this.$bus.emit('changeTab', 5)
      this.get_arp()
	  this.speed_timer = setInterval(()=> {
	    this.get_wifi_client()
	    this.get_arp()
	  }, 2000)
    },
    activated() {
      this.$bus.emit('changeTab', 5)
      this.speed_timer = setInterval(()=> {
        this.get_wifi_client()
        this.get_arp()
      }, 2000)
    },
    deactivated() {
      clearInterval(this.speed_timer)
    },
    beforeDestroy() {
      clearInterval(this.speed_timer)
    },
  }
</script>

<style lang="scss" scoped>

</style>
